<script setup lang="ts">
import { useColumns } from "./utils/useColumns";
import Empty from "./utils/empty.svg?component";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "~icons/ep/plus";
import Delete from "~icons/ep/delete";

import { defineModel, defineOptions } from "vue";
import PureTable from "@pureadmin/table";

defineOptions({
  name: "Fields"
});
const model = defineModel();
const { columns, dataList, onAdd, onDel } = useColumns(model);
</script>

<template>
  <pure-table
    row-key="id"
    align-whole="center"
    :header-cell-style="{
      background: 'var(--el-fill-color-light)',
      color: 'var(--el-text-color-primary)'
    }"
    :data="dataList"
    :columns="columns"
  >
    <template #empty>
      <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
    </template>
    <template #append>
      <el-button
        plain
        class="w-full my-2"
        :icon="useRenderIcon(AddFill)"
        @click="onAdd"
      >
        添加一行数据
      </el-button>
    </template>
    <template #operation="{ row }">
      <el-button
        class="reset-margin"
        link
        type="primary"
        :icon="useRenderIcon(Delete)"
        @click="onDel(row)"
      />
    </template>
  </pure-table>
</template>

<style scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}
</style>
